<template>
<!--编写框架-->
<!-- 搜索框 -->
<!--  第三方组件表格样式-->
<!--  location: "郑州" password: "123456"   phoneNumber: "13333333333"
  points: 1212   userAccount: "lmy"  userId: 1    userName: "李明雨"  userreviews.reviewContent-->
  <div>
<!-- v-model="searchInput"   输入框 和 搜索按钮-->
  <div class="user-top">
    <el-input v-model="searchInput" style="width: 200px;margin-left: 20px"></el-input>
    <el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="serachUser">搜索</el-button>
  </div>
<!--  用户表格  -->
  <el-table
      :data="allUsers"
      border
      :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}"
      style="width: 860px">
    <el-table-column
        fixed
        prop="userId"
        label="用户ID"
        align="center"
        width="120">
    </el-table-column>
    <el-table-column
        prop="userName"
        align="center"
        label="用户姓名"
        width="120">
    </el-table-column>
    <el-table-column
        prop="userAccount"
        align="center"
        label="用户昵称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="location"
        align="center"
        label="用户地址"
        width="160">
    </el-table-column>
    <el-table-column
        prop="points"
        align="center"
        label="用户积分"
        sortable
        width="120">
    </el-table-column>
    <el-table-column
        prop="userreviews.reviewContent"
        label="用户评价"
        width="120">
    </el-table-column>
    <el-table-column
        label="操作"
        align="center"
        width="100">
      <template slot-scope="scope">
        <el-button @click="dialogFormVisible = true,selectuser(scope.row)" type="text" size="small">修改</el-button>
        <el-button type="text" size="small" @click="deleteuser(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<!--  修改弹框  -->
    <div>
      <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
        用户 ID:<el-input v-model="userID" style="width: 70%;margin-left: 20px"></el-input><br>
        用户姓名:<el-input v-model="userName" style="width: 70%;margin-left: 20px"></el-input><br>
        用户昵称:<el-input v-model="userAccount" style="width: 70%;margin-left: 20px"></el-input><br>
        用户密码:<el-input v-model="userPassword" style="width: 70%;margin-left: 20px"></el-input><br>
        手机号码:<el-input v-model="phoneNumber" style="width: 70%;margin-left: 20px"></el-input><br>
        用户地址:<el-input v-model="userLocation" style="width: 70%;margin-left: 20px"></el-input><br>
        用户积分:<el-input v-model="userPoints" style="width: 70%;margin-left: 20px"></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">放弃修改</el-button>
          <el-button type="primary" @click="updateuser(userID)">确定修改</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

  <!--   编辑弹框信息   --------------->

</template>


<script>
    export default {
      /*页面跳转名称*/
      name: "UserComponent",
      /*页面存储数据源*/
      data:function (){
        return {
          allUsers:[],
          searchInput:'',
          dialogFormVisible: false,
          userID:'',
          userName:'',
          userAccount:'',
          userPassword:'',
          phoneNumber:'',
          userLocation:'',
          userPoints:'',
        }

      },
      /*初始方法，页面加载的时候方法同时执行*/
      created: function (){
          this.serachUser();
      },
      /*普通方法会触发事件*/
      methods:{

        /*搜索方法*/
        serachUser(){

          console.log(this.searchInput)
          /*请求数据*/
          this.axios.post("/user/selectuser",{
          keyword:this.searchInput,
          }).then((res)=>{
            console.log(res);
            console.log("************");
            console.log(res.data.data);
            this.allUsers=res.data.data;
          }).catch((err)=>{

          })
        },
        /*修改用户时弹窗传递的数据映射*/
        selectuser(row){
          this.userID=row.userId,
          this.userName=row.userName,
          this.userAccount=row.userAccount,
          this.userPassword=row.password,
          this.phoneNumber=row.phoneNumber,
          this.userLocation=row.location,
          this.userPoints=row.points
        },
        /*修改用户信息*/
        updateuser(id){
          console.log(id);
          console.log("chengg")
          this.axios.post("/user/updateuser",{
            userId:id,
            userName:this.userName,
            userAccount:this.userAccount,
            password:this.userPassword,
            phoneNumber:this.phoneNumber,
            location:this.userLocation,
            points:this.userPoints
          }).then((res)=>{
            this.serachUser()
          }).catch((err)=>{
            console.log(err)
          })
          this.dialogFormVisible = false
        },
        /*删除用户*/
        deleteuser(row){
          console.log(row)
          /*请求数据*/
          this.axios.post("/user/deleteuser",{
            userId:row.userId,
          }).then((res)=>{
            this.serachUser()
          }).catch((err)=>{

          })
        },

      }

    }
</script>

<style scoped>
/*编写样式*/
.user-top{
  padding-bottom: 20px;
}
</style>